<template>
  <el-dialog
    class="ba-operate-dialog"
    :close-on-click-modal="false"
    :model-value="modelValue"
    @close="closeForm"
  >
    <template #header>
      <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']">
        {{ warn.opera === "add" ? "添加" : "编辑" }}
      </div>
    </template>
    <el-scrollbar class="ba-table-form-scrollbar">
      <div
        class="ba-operate-form ba-add-form"
        :style="'width: calc(100% - ' + state.labelWidth! / 2 + 'px)'"
      >
        <el-form
          ref="formRef"
          @keyup.enter="onAddSubmit(formRef)"
          :model="state.form"
          label-position="right"
          label-width="160px"
          :rules="rules"
        >
          <el-form-item label="设备ID" prop="eId">
            <el-input v-model="state.form.eId" disabled />
          </el-form-item>
          <el-form-item label="设备名称" prop="eName">
            <el-input v-model="state.form.eName" />
          </el-form-item>
          <el-form-item label="告警规则" prop="eName">
            <!-- <el-cascader
                ref="cascaderRef"
                clearable
                @change="handleChange"
                :options="state.warnOptions"
                :getCheckedNodes="true"
              ></el-cascader> -->
            <el-select v-model="state.form.setName" @change="handleChange">
              <el-option
                v-for="item in state.warnOptions"
                :key="item.label"
                :label="item.label"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="设定告警配置编号" prop="setCode">
              <el-input
                v-model="state.form.setCode"
                placeholder="请输入设定编号"
              />
            </el-form-item>
            <el-form-item label="设定告警配置名称" prop="setName">
              <el-input
                v-model="state.form.setName"
                placeholder="请输入设定告警配置"
              />
            </el-form-item> -->
          <el-form-item label="设定告警值(上限)" prop="setValue">
            <el-input
              v-model="state.form.setValue"
              placeholder="请输入设定告警值"
            />
          </el-form-item>
          <el-form-item label="设定告警值(下限)" prop="setlower">
            <el-input
              v-model="state.form.setlower"
              placeholder="请输入设定告警值"
            />
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input v-model="state.form.remark" />
          </el-form-item>
        </el-form>
      </div>
    </el-scrollbar>
    <template #footer>
      <div :style="'width: calc(100% - ' + state.labelWidth / 1.8 + 'px)'">
        <el-button @click="closeForm">取消</el-button>
        <el-button
          v-blur
          :loading="state.submitLoading"
          @click="onAddSubmit(formRef)"
          type="primary"
        >
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { Delete } from "@element-plus/icons-vue";
import { useDeviceWarnSet } from "@/store/backend/DeviceM/warnSet";
import useCurrentInstance from "@/utils/useCurrentInstance";

type Item = {
  eId: number; //设备id
  eName: string; //设备名称 产品名称
  setCode: string; //设定编号
  setName: string; //设定名称
  setValue: string; //设定值
  setlower: string; //设定值
  remark: string; //备注
};
interface Props {
  modelValue: boolean;
}
const { proxy } = useCurrentInstance(); //mitt
const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
});

const emits = defineEmits<{
  (e: "update:modelValue", value: boolean): void;
}>();

const closeForm = () => {
  emits("update:modelValue", false);
};

const formRef = ref<FormInstance>();
const cascaderRef = ref();
const warn = useDeviceWarnSet();
const rules = reactive<FormRules>({
  eId: [{ required: true, message: "设备ID不能为空", trigger: "blur" }],
  eName: [{ required: true, message: "设备名称不能为空", trigger: "blur" }],
  setCode: [
    { required: true, message: "告警配置编号不能为空", trigger: "blur" },
  ],
  setName: [
    { required: true, message: "告警配置名称不能为空", trigger: "blur" },
  ],
  setValue: [{ required: true, message: "告警值不能为空", trigger: "blur" }],
});
const state: {
  labelWidth: number;
  submitLoading: boolean;
  form: Item;
  warnOptions: any[];
} = reactive({
  labelWidth: 160,
  submitLoading: false,
  warnOptions: [
    {
      label: "风速",
      value: "FS001",
    },
    {
      label: "温度",
      value: "WD001",
    },
    {
      label: "压强",
      value: "YQ001",
    },
    {
      label: "电流",
      value: "DL001",
    },
    {
      label: "电压",
      value: "DY001",
    },
    {
      label: "电频",
      value: "DP001",
    },
    {
      label: "累计时长",
      value: "TIME001",
    },
  ],
  form: {
    eId: 0,
    eName: "",
    setCode: "",
    setName: "",
    setValue: "",
    setlower: "",
    remark: "",
  },
});

const handleChange = (value: any) => {
  // let data = cascaderRef.value.getCheckedNodes();
  console.log("any", value.value, value.label);
  if (!value) {
    state.form.setCode = "";
    state.form.setName = "";
  } else {
    state.form.setName = value.label;
    state.form.setCode = value.value;
  }
};
const onAddSubmit = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (valid) {
      if (warn.opera === "edit") {
        warn.editWarnSet(state.form).then((res) => {
          closeForm();
          // cascaderRef.value.panel.clearCheckedNodes();
          proxy.eventBus.emit("refreshWarnSet");
        });
      } else {
        warn.addWarnSet(state.form).then((res) => {
          closeForm();
          // cascaderRef.value.panel.clearCheckedNodes();
          proxy.eventBus.emit("refreshWarnSet");
        });
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};
//修改告警编辑表单
proxy.eventBus.on("editWarnSet", (data: Item) => {
  console.log("editWarnSet", data);
  state.form = data;
});
//新增告警表单
proxy.eventBus.on("addWarnSet", (data: any) => {
  console.log("data", data);
  state.form.eId = data.id; //设备id赋值
  state.form.eName = data.productName; //设备名称赋值
  state.form.setCode = "";
  state.form.setName = "";
  state.form.setValue = "";
  state.form.setlower = "";
  state.form.remark = "";
});
onMounted(() => {});
</script>

<style scoped lang="scss">
.add-item-content {
  display: none;
}
</style>
